<template>
  <div>
    <div class="page-body">
      <div class="page-left" v-loading="loadingLeft">
        <data-view v-model="cmpList" v-model:searchValue="cmpSearchv" :header-btn="['search']"
          :current-page="cmpCurrentPage" :page-size="pageSize" :total="cmpDataTotal" @search="onCmpSearch"
          @update:current-page="onUpdateCmpCurrentPage">
          <template #content="{ dataItem }">
            <cmp-card class="page-left-item" :class="{
              'page-left-item-select': selectCmp?.Id == dataItem.Id
            }" style="flex-grow: 1;margin:5px;" :card-data="dataItem" @click="onClickCmp(dataItem)"></cmp-card>
          </template>
        </data-view>
      </div>
      <div class="page-right" v-loading="rightLoading">
        <div class="page-right-none" v-if="!selectCmp">
          点击左侧公司,查询对应卡券
        </div>
        <data-view v-else v-model="dataList" v-model:searchValue="searchValue" :header-btn="menuActionArray"
          :current-page="currentPage" :page-size="pageSize" :total="dataTotal" :delete-before="deleteBefore"
          @search="onSearch" @click-add="openModalView()" @delete-submit="onDeleteSubmit()"
          @update:current-page="onUpdateCurrentPage" @dblclick="openModalView">
          <template #content="{ dataItem }">
            <e-card-rule-card style="margin:5px" :card-data="dataItem" :stock="stocksMap.get(dataItem.Id)">
              <template #footer>
                <div style="display: flex;justify-content: flex-end;">
                  <el-button plain type="primary" size="small" @click="openModalView(dataItem)">卡券详情</el-button>
                </div>
              </template>
            </e-card-rule-card>
          </template>
        </data-view>
      </div>
    </div>

    <form-modal-view v-if="isShowFormModalView" ref="formModalViewRef" @submit="getData()"
      @close="isShowFormModalView = false"></form-modal-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ECardRule",
})
</script>

<script lang="ts" setup>
import { ref, nextTick, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import DataView from "@/components/DataView";
import { docType, ECardRuleDataClass } from "@/model/ECardRule";
import FormModalView from "./ECardRuleModalView.vue";
import { queryGet } from "@/utils/api";
import { request } from "@/utils/axios";
import { appState } from "@/store/app"
import { getPanelUxBtn, getMenuAction } from "@/utils/bus";
import CmpCard from "@/views/pages/Cmp/CmpCard.vue";
import { CmpDataClass } from "@/model/Cmp";
import ECardRuleCard from "./ECardRuleCard.vue"

let menuActionType = ref(getMenuAction("ECardRule"))
let menuActionArray = ref(getPanelUxBtn("ECardRule"));


/**
 * 每页数据数量
 */
let pageSize = ref(25);

/**
 * ====================
 *  左侧数据
 * ====================
 */

/**
 * 选择的公司id
 */
let selectCmp = ref<CmpDataClass | null>(null);

/**
 * 左侧loading
 */
let loadingLeft = ref(false);

/**
 * 公司列表
 */
let cmpList = ref<CmpDataClass[]>([]);

/**
 * 公司查询
 */
let cmpSearchv = ref("");

/**
 * 页数
 */
let cmpCurrentPage = ref(1);

/**
 * 公司总数量
 */
let cmpDataTotal = ref(0);

/**
 * 当点击搜索的时候 
 */
function onCmpSearch() {
  cmpCurrentPage.value = 1;
  selectCmp.value = null;
  getCmpList();
}

/**
 * 当前变更页数的时候
 */
function onUpdateCmpCurrentPage(count: number) {
  cmpCurrentPage.value = count;
  selectCmp.value = null;
  //重新加载数据
  getCmpList();
}

/**
 * 获取公司数据
 */
function getCmpList() {
  loadingLeft.value = true;
  queryGet({
    docType: "Cmp",
    actionType: "PageList",
    apiType: "PageList",
    limit: pageSize.value
  }, {
    Searchv: cmpSearchv.value,
    Start: cmpCurrentPage.value,
  })
    .then((res) => {
      cmpList.value = res.List.map((item: any) => {
        return new CmpDataClass(item);
      })
      cmpDataTotal.value = res.Total;
    })
    .finally(() => {
      loadingLeft.value = false;
    })
}

/**
 * 单击某家公司
 */
function onClickCmp(row: CmpDataClass) {
  selectCmp.value = row;
  //获取卡券 
  getData();
}

/**
 * ====================
 *  主数据
 * ====================
 */

let rightLoading = ref(false);

let dataList = ref<ECardRuleDataClass[]>([]);

/**
 * 库存
 */
let stocksMap = ref<Map<number, number>>(new Map());

/**
 * 搜索内容
 */
let searchValue = ref("");

/**
 * 数据总数量
 */
let dataTotal = ref(0);

/**
 * 当前页数
 */
let currentPage = ref(1);

/**
 * 弹框是否展示
 */
let isShowFormModalView = ref(false)

/**
 * 弹框组件
 */
let formModalViewRef = ref();

/**
 * 当点击搜索的时候 
 */
function onSearch() {
  currentPage.value = 1;
  getData();
}

/**
 * 当前页面更新
 */
function onUpdateCurrentPage(count: number) {
  currentPage.value = count;
  //重新加载数据
  getData();
}

/**
 * 删除之前
 */
function deleteBefore(selectList: ECardRuleDataClass[]): Promise<void> {
  return new Promise((resolve, reject) => {
    console.log(selectList);
    ElMessageBox.confirm("确定要进行删除操作吗", "提示", {
      type: "warning"
    })
      .then(() => {
        return Promise.all(selectList.map((item) => {
          return request("/" + docType + "/Delete", {
            // UnionGuid: item.UnionGuid,
            Id: item.Id
          }, {
            // state: item.UnionGuid
          })
        }))
      })
      .then(() => {
        resolve();
      })
      .catch(reject)
  })
}

/**
 * 当删除成功的时候
 */
function onDeleteSubmit() {
  //重新获取数据
  getData();
}

/**
 * 获取数据
 */
function getData() {
  rightLoading.value = true;
  dataList.value = [];
  queryGet({
    docType: docType,
    actionType: "PageList",
    apiType: "PageList"
  }, {
    Searchv: searchValue.value,
    Start: currentPage.value,
    Limit: pageSize.value,
    Id: selectCmp.value?.Id
  })
    .then((res) => {
      dataList.value = res.List.map((item: any) => {
        return new ECardRuleDataClass(item);
      })
      dataTotal.value = res.Total;
      // 获取模板库存
      if (dataList.value.length > 0) getStocks();
    })
    .finally(() => {
      rightLoading.value = false;
    })
}


/**
 * 获取卡券模板库存
 */
function getStocks() {
  stocksMap.value.clear();
  queryGet({
    docType: docType,
    actionType: "Stocks",
    apiType: "SingleList"
  }, {
    Ids: dataList.value.map(item => item.Id),
  })
    .then((res) => {
      for (let item of res) {
        stocksMap.value.set(item.Id, item.UseableStock || 0);
      }
    })
}

/**
 * 打开弹框 
 */
function openModalView(row?: ECardRuleDataClass) {
  isShowFormModalView.value = true;
  nextTick(() => {
    formModalViewRef.value.show(selectCmp.value, row);
  })
}

/**
 * ====================
 *  页面初始化
 * ====================
 */
// getData();

onMounted(() => {
  getCmpList();
})
</script>

<style lang="less" scoped>
.page-body {
  height: 100%;
  width: 100%;
  display: flex;
}

.page-left {
  flex-shrink: 0;
  flex-basis: 400px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.page-left-item {
  cursor: pointer;
}

.page-left-item-select {
  outline: 2px solid var(--primaryColor);
  border-radius: 5px;
}

.page-right {
  flex-grow: 1;
}

.page-right-none {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.3);
}
</style>